<template>
    <div>
        <h1>实现  git</h1>
       <h1>分页显示会员</h1>
        <table class="table table-bordered">
            <tbody>
               <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>出生日期</td>
                <td>证件类型</td>
                <td>证件号码</td>
                <td>手机号</td>
                <td>职业</td>
                <td>状态</td>
                <td>详细地址</td>
               </tr>
                <tr :key="item.id" v-for="item in data.list" >
                <td>{{item.memberName}}</td>
                <td>{{item.memberSex==1?"男":"女"}}</td>
                <td>{{moment(item.memberTime).format("YYYY-MM-DD")}}</td>
                <td>{{item.memberType}}</td>
                <td>{{item.memberCard}}</td>
                <td>{{item.memberPhone}}</td>
                <td>{{item.roleName}}</td>
                <td>{{item.memberState==true?"启用":"禁用"}}</td>
                <td>{{item.memberAddress}}</td>
               </tr>
            </tbody>
        </table>
       <div>
         <span>共{{ data.totalPage }}条</span>
        <span>每页{{ info.pagesize }}条</span>
        <span>当前{{ info.pageindex }}/{{ data.totalPage }}页</span>

       
        <input type="button" value="首页" @click="page(1)">
        <input type="button" value="上一页" @click="page(info.pageindex-1)">
        <input type="button" v-for="item in data.totalPage" :value=" item " @click="page(item)" >
        <input type="button" value="下一页" @click="page(info.pageindex+1)">
        <input type="button" value="尾页" @click="page(data.totalPage)">
        <input type="text" v-model="info.pageindex">
        <input type="button" value="跳转" @click="page(info.pageindex)">

        <select v-model="info.pagesize" @click="show">
            <option :value="item"  v-for="item in arr">当前第{{ item }}页</option>
        </select>
       </div>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from "vue";
import moment from "moment"
import axios from 'axios'
import {useRouter,useRoute} from "vue-router";
onMounted(()=>
{
    getseletes();
    show();
})
const router=useRouter();
const route=useRoute();

let getselect:any=ref([]);
let data:any=reactive({
    totalCount:0,
    totalPage:0,
    list:[]
});
const getseletes=()=>
{
    axios({
        url:'http://localhost:5235/api/Member/GetRoles',
        method:"get",
    })
    .then((res)=>
    {
        console.log(res);
        getselect.value=res.data;
    })
    .catch((err)=>
    {
        console.log(err);
    })
}
let info:any=reactive({
    pageindex:1,
    pagesize:2   
})

const show=()=>
{
    
    axios({
        url:'http://localhost:5235/api/Member/GetList',
        method:"get",
        params:info
    })
    .then((res)=>
    {
        console.log(res);
        Object.assign(data,res.data)
       
    })
    .catch((err)=>
    {
        console.log(err);
    })
}
//分页
const page=(num:any)=>
{
    console.log("num",num);
    if(num<1)
    {
        info.pageindex=1;
        return;
    }
    if(num>data.totalPage)
    {
        info.pageindex=data.totalPage;
        return;
    }
    info.pageindex=num;
    show();
    
}
let arr:any=ref([2,3,5,10]);
</script>

<style scoped>
span{
    margin: 0 5px;
}
</style>